<template>
  <view>
    <z-paging ref="pagingRef" v-model="dataList" :auto="false" @query="queryList">
      <template #top>
        <view>
          <mt-navbar title="我的报名"> </mt-navbar>
          <view class="drop-box">
            <view class="custom-drop h-44px">
              <uv-tabs
                v-if="showTabs"
                :list="tabList"
                :current="currentTab"
                :active-style="{ color: '#1484EE', fontWeight: 'bold' }"
                :inactive-style="{ color: '#727687' }"
                line-width="32"
                line-color="#1484EE"
                @click="tabsChange"
              ></uv-tabs>
            </view>
          </view>
        </view>
      </template>
      <view class="px-32rpx pt-16rpx">
        <view
          v-for="item in dataList"
          :key="item.activityServiceProviderId"
          class="flex items-start mb-16rpx p-24rpx bg-#ffffff rd-8rpx"
          @click="goDetail(item)"
        >
          <view class="w-330rpx h-220rpx relative mr-16rpx">
            <image class="w-full h-full rd-8rpx" :src="item.coverFile[0].url"></image>
          </view>
          <view class="flex-1 min-w-0">
            <view class="clamp2 min-h-80rpx text-28rpx text-#1C213E font-bold mb-8rpx line-height-42rpx">{{ item.activityName }}</view>
            <view class="flex items-center justify-between h-32rpx mb-16rpx">
              <text class="text-24rpx text-#727687">{{ dayjs(item.startTime).format('MM/DD') }} {{ dayjs(item.startTime).format('ddd') }}</text>
            </view>
            <view class="h-32rpx text-24rpx text-#727687 mb-16rpx">{{ item.addressShowStatus === 1 ? item.city : '' }}</view>
            <view v-if="item.orderStatus === 1" class="text-28rpx text-#F94B4A font-bold">已退款￥{{ amountTransfer(item.rightsAmount) }}</view>
            <view v-if="item.orderStatus === 4" class="text-28rpx text-#28B094 font-bold">已付款￥{{ amountTransfer(item.rightsAmount) }}</view>
          </view>
        </view>
      </view>
    </z-paging>
  </view>
</template>

<script setup>
import { activitygetMySignUpPageByServiceProvider, activitygetMySignUpPageByServiceProviderCount } from '@/subActivity/api/index';
import { amountTransfer } from '@/utils/tools';
import dayjs from 'dayjs';
import 'dayjs/locale/zh-cn';

dayjs.locale('zh-cn');

const tabList = ref([
  {
    name: '全部',
    type: null,
    badge: {
      value: 0,
      bgColor: 'transparent',
      color: '#1484EE'
    }
  },
  {
    name: '待上传',
    type: 1,
    badge: {
      value: 0,
      bgColor: 'transparent',
      color: '#727687'
    }
  },
  {
    name: '报名成功',
    type: 2,
    badge: {
      value: 0,
      bgColor: 'transparent',
      color: '#727687'
    }
  },
  {
    name: '报名失败',
    type: 3,
    badge: {
      value: 0,
      bgColor: 'transparent',
      color: '#727687'
    }
  }
]);
// 当前选中的 tab 索引
const currentTab = ref(0);
// 切换 tab 状态
function tabsChange(e) {
  currentTab.value = e.index;
  for (let item of tabList.value) {
    item.badge.color = '#727687';
  }

  tabList.value[e.index].badge.color = '#1484EE';
  getNum();
  pagingRef.value.reload();
}

function goDetail(item) {
  uni.navigateTo({
    url: `/subActivity/pages/myServiceDetail?id=${item.id}&rightsId=${item.rightsId}&orderStatus=${item.orderStatus}`
  });
}

const showTabs = ref(false);
function getNum() {
  showTabs.value = false;
  activitygetMySignUpPageByServiceProviderCount().then((res) => {
    tabList.value.map((i) => {
      res.data.map((x) => {
        if (i.type == x.status) {
          i.badge.value = x.count;
        }
        if (x.status === -1) {
          tabList.value[0].badge.value = x.count;
        }
      });
    });
    setTimeout(() => {
      showTabs.value = true;
    }, 100);
  });
}

// 分页 ref
const pagingRef = ref(null);
const dataList = ref([]);
const lastId = ref('');

// 请求列表数据
async function queryList(pageNum, pageSize) {
  try {
    const params = {
      pageNum: pageNum,
      pageSize: pageSize,
      lastId: pageNum === 1 ? '' : lastId.value,
      status: tabList.value[currentTab.value].type
    };
    const res = await activitygetMySignUpPageByServiceProvider(params);
    const list = res.data.items;

    lastId.value = list[list.length - 1]?.activityServiceProviderId;

    pagingRef.value.complete(list);
  } catch (e) {
    pagingRef.value.complete(false);
  }
}

onShow(() => {
  getNum();
  nextTick(() => {
    pagingRef.value.refresh();
  });
});
</script>

<style lang="scss" scoped>
.drop-box {
  position: relative;
  display: flex;
  background-color: #ffffff;
  box-shadow: 0 31rpx 62rpx -15rpx rgba(0, 0, 0, 0.1);
  .custom-drop {
    flex: 1;
    min-width: 0;
  }
}
</style>
